<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >选择医院</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="menu">
      <van-dropdown-menu>
        <van-dropdown-item
          @change="itemChange"
          v-model="value1"
          :options="option1"
        />
        <van-dropdown-item
          @change="itemChange2"
          v-model="value2"
          :options="option2"
        />
      </van-dropdown-menu>
    </div>
    <div class="content">
      <van-checkbox-group v-model="result">
        <div class="h-list" v-for="(item, index) in hospitalData" :key="index">
          <div class="h-child">
            <van-checkbox :name="item"></van-checkbox>
            <div class="center">
              <div class="one">
                <p>{{ item.hospital }}</p>
              </div>
              <div class="two">
                <p>{{ item.department }}{{ item.hospitalCategory }}</p>
                <p>{{ item.hospitalLevel }}</p>
              </div>
              <div class="three">
                <p>地址：{{ item.address }}</p>
              </div>
            </div>
          </div>
        </div>
      </van-checkbox-group>
      <van-button class="h-btn" @click="hospitalClick" type="info" round block
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Toast, Dialog } from "vant";
import { getDepartment, getDepartmentProv } from "@/api/doctor";
export default {
  name: "hospital",
  data() {
    return {
      items: null,
      hospitalData: null,
      result: [],
      value1: 0,
      value2: 0,
      option1: [{ text: "全部科室", value: 0 }],
      option2: [{ text: "全国", value: 0 }],
      select: {
        departmentName: null,
        provi: null,
      },
    };
  },

  components: { navbar },

  computed: {},

  created() {
    this.getZhenShi();
    this.getAll(this.select);
  },
  mounted() {},

  methods: {
    getAll(data) {
      let datas = data || null;
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });
      getDepartment(datas).then((res) => {
        if (res.data.status == 200) {
          this.hospitalData = res.data.info;
          Toast.clear();
        } else {
          Toast.fail("系统错误");
        }
      });
    },
    // 返回上一页
    goBack() {
      this.$router.replace({
        name: "doctorAdvice",
      });
    },
    // 获取科室省份
    getZhenShi() {
      getDepartmentProv().then((res) => {
        if (res.data.status == 200) {
          this.option1 = res.data.info.department;
          this.option2 = res.data.info.prov;
          let i = { text: "全部科室", value: 0 };
          this.option1.unshift(i);
          let x = { text: "全国", value: 0 };
          this.option2.unshift(x);
        }
      });
    },
    // 科室改变
    itemChange(value) {
      if (value == 0) {
        this.select.departmentName = null;
      } else {
        let values = this.option1.filter((item) => {
          return item.value == value;
        });
        this.select.departmentName = values[0].text;
      }
      this.getAll(this.select);
    },
    //
    itemChange2(value) {
      if (value == 0) {
        this.select.provi = null;
      } else {
        let values = this.option2.filter((item) => {
          return item.value == value;
        });
        this.select.provi = values[0].text;
      }
      this.getAll(this.select);
    },
    //
    hospitalClick() {
      let { result } = this;
      if (result.length == 0) {
        Toast.fail("请选择推荐医院");
      } else {
        //
        console.log(result);
        this.$store.commit("list/SET_HOSPITAL", result);
        this.$router.go(-1);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .menu {
    position: fixed;
    width: 100%;
    top: 0.45rem;
    z-index: 10;
  }
  & .content {
    width: 95%;
    margin: auto;
    margin-top: 0.55rem;
    padding-bottom: 0.5rem;
    & .h-list {
      margin-top: 0.1rem;
      & .h-child {
        background: #fff;
        margin-bottom: 0.1rem;
        border-radius: 0.1rem;
        box-shadow: 0px 0px 10px #cccccc;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.05rem;
        & .center {
          width: 85%;
          & .one {
            display: flex;
            justify-content: space-between;
            & p:nth-of-type(1) {
              font-size: 0.16rem;
              width: 100%;
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin: 0.1rem 0;
            }
          }
          & .two {
            display: flex;
            justify-content: space-between;
            & p {
              margin: 0.1rem 0;
              font-size: 0.14rem;
            }
            & p:nth-of-type(1) {
              color: #999999;
            }
            & p:nth-of-type(2) {
              color: red;
            }
          }
          & .three {
            margin-bottom: 0.1rem;
            font-size: 0.14rem;
            text-align: left;
            color: #999999;
            line-height: 0.16rem;
          }
        }
      }
    }
  }
}
.h-btn {
  position: fixed;
  bottom: 0.1rem;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
}
</style>